<template>
	<view>
		<!-- 弹窗 -->
		<view class="guide-bg" catchtouchmove="true">
			<view class="guid-view">
				<view class="guide-img">
					<image class="fengrui-img" src="/static/data/cover-guide.svg" mode="aspectFit"></image>
				</view>
				<view class="guide-title">请点击下方前往小程序使用完整服务</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "cover-guide",
		data() {
			return {

			};
		}
	}
</script>

<style scoped>
	.guide-bg {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 9999999;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 1) 40%);
	}

	.guide-img {
		height: 400rpx;
		width: 400rpx;
		margin: auto;
	}

	.guide-view {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 15%;

	}

	.guide-title {
		margin: 40rpx auto;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}

	.guide-des {
		color: #666;
		text-align: center;
		font-size: 26rpx;
		line-height: 1.5;
	}

	.guid-view {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 15%;

	}




	.fengrui-img {
		height: 100%;
		width: 100%;
	}

	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {
		.guide-bg {
			background: linear-gradient(to bottom, rgba(22, 22, 22, 0) 30%, rgba(22, 22, 22, 1) 40%);
		}
	}
</style>